<template>
  <div style="margin-top: 100px">
    <!-- 搜索部门信息的搜索栏 -->
    <el-input v-model="searchUnitNo" placeholder="请输入部门编号或名称" style="width: 50%;height: 40px"></el-input>
    <el-button size="small" type="primary" @click="this.searchByUnitNo(searchUnitNo)" style="position: relative; left: 5px; height: 40px">搜索</el-button>
    <el-button size="small" type="success" @click="this.showAddDialog()" style="position: relative; left: 5px; height: 40px">新增</el-button>
    <!-- 部门表格 -->
    <el-table :data="unitData" style="width: 100% ;"height="80vh">
      <el-table-column prop="unitNo" label="部门编号" width="180"></el-table-column>
      <el-table-column prop="unitName" label="部门名称" width="180"></el-table-column>
      <el-table-column prop="pno" label="上级部门编号" width="180"></el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间" width="180"></el-table-column>
      <el-table-column prop="gmtModify" label="修改时间" width="180"></el-table-column>
      <el-table-column align="center" label="操作" width="300">
        <template v-slot:default="scope">
          <!-- 添加一个删除按钮，并为它绑定 deleteUnit 方法 -->
          <!-- 添加一个修改信息按钮，并为它绑定 change 方法 -->
          <el-button size="small" type="danger" @click="deleteUnit(scope.row.id)">删除</el-button>
          <el-button size="small" type="primary" @click="change(scope.row)">修改信息</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
        align-center
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        small
        :pager-count="5"
        :page-sizes="[50, 100 , 200 , 500,1000,2000,5000]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="page.total">
    </el-pagination>

  </div>
    <el-dialog title="修改部门信息" v-model="dialogVisible" width="30%">
        <el-form :model="editForm" ref="editForm" :rules="editFormRules">
            <el-form-item label="部门编号" prop="unitNo" :rules="[{ required: true, message: '请输入部门编号', trigger: 'blur' }]">
                <el-input v-model="editForm.unitNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="unitName" :rules="[{ required: true, message: '请输入部门名称', trigger: 'blur' }]">
                <el-input v-model="editForm.unitName" autocomplete="off"></el-input>
            </el-form-item>
          <el-form-item label="上级部门编号" prop="pno">
                <el-input v-model="editForm.pno" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmChange">确 定</el-button>
        </div>
    </el-dialog>


  <!-- 新增部门的对话框 -->
    <el-dialog title="新增部门" v-model="addDialogVisible">
        <el-form :model="addForm" :rules="addFormRules" ref="addFormRef">
            <el-form-item label="部门编号" prop="unitNo">
                <el-input v-model="addForm.unitNo" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门名称" prop="unitName">
                <el-input v-model="addForm.unitName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="上级部门编号" prop="pno">
                <el-input v-model="addForm.pno" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmAdd">确 定</el-button>
        </div>
    </el-dialog>

</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/util/request.js';


export default {
  data() {
    return {
      unitData: [], // 辅导员数据
      page: {
        currentPage: 1, // 当前页码
        pageSize: 50, // 每页显示条数
        total: 0 // 总条数
      },

      searchUnitNo :"",
      addDialogVisible: false, // 控制新增辅导员对话框的显示
        addForm: {
            unitNo: '',
            unitName: '',
            pno: ''
        },
        addFormRules: {
            unitNo: [
                { required: true, message: '请输入部门编号', trigger: 'blur' }
            ],
            unitName: [
                { required: true, message: '请输入部门名称', trigger: 'blur' }
            ]
        },
        dialogVisible: false,
        editForm: {
            unitNo: '',
            unitName: '',
            pno: ''
        },
        editFormRules: {
            unitNo: [
                { required: true, message: '请输入部门编号', trigger: 'blur' }
            ],
            unitName: [
                { required: true, message: '请输入部门名称', trigger: 'blur' }
            ]
        }
    };
  },
  created() {
    this.getUnits();
  },
  methods: {
    handleSizeChange(newSize) {
      this.page.pageSize = newSize;
      this.getUnits();
    },
    handleCurrentChange(newPage) {
      this.page.currentPage = newPage;
      this.getUnits();
    },
    getUnits() {
      request.get('/info_unit/page', {
        params: {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      }).then((res) => {
        if (res.data.code === "200") {
          this.unitData = res.data.data.records;
          this.page.total = res.data.data.total;
        }
      })
    },
    searchByUnitNo(searchUnitNo) {
      if (!this.searchUnitNo) {
        this.getUnits();
      } else {
        request.get(`/info_unit/${searchUnitNo}`).then((res) => {
          if (res.data.code === "200") {
            this.unitData = res.data.data;
          } else {
            this.unitData = [];
          }
        })
      }
    },
    deleteUnit(id) {
      ElMessageBox.confirm('此操作将永久删除该部门, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确认删除，向服务器发送请求
        request.get(`/info_unit/delete/${id}`)
            .then(() => {
              // 删除成功，重新获取数据
              this.getUnits();
              ElMessage({
                type: 'success',
                message: '删除成功!'
              });
            })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    change(row) {
      this.editForm =  row ; // 直接复制row对象
      this.dialogVisible = true;
    },
    confirmChange() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          if (this.editForm.id) {
            // 如果存在ID，则执行修改操作
            request.post('/info_unit/edit', this.editForm)
                .then(() => {
                  this.dialogVisible = false;
                  this.getUnits();
                  ElMessage({
                    type: 'success',
                    message: '更新成功!'
                  });
                })
          } else {
            // Close the dialog
            this.dialogVisible = false;
            this.getUnits();
          }
        }
      });
    },

    showAddDialog() {
      this.addDialogVisible = true; // 显示新增辅导员对话框
      this.addForm = {}; // 重置表单
    },
    confirmAdd() {
      // 验证表单
      this.$refs.addFormRef.validate((valid) => {
        if (valid) {
          // 发送 POST 请求到服务器
          request.post('/info_unit/edit', this.addForm).then(() => {
            // 关闭对话框
            this.addDialogVisible = false;
            // 重新获取数据
            this.getUnits();
            // 显示成功消息
            this.$message({
              type: 'success',
              message: '新增成功!'
            });
          })
        }
      });
    }
  },
};
</script>

<style >

</style>

